<template>
  <div class="page-class">
    <Breadcrumb>
      <a-button type="primary" @click="handleAdd">新增</a-button>
    </Breadcrumb>
    <div class="cnt-class">
      <div class="query">
        <a-row>
          <a-col :span="6">
            <a-input-search
              v-model.trim="queryName"
              :maxLength="50"
              allowClear
              placeholder="请输入用户名或手机号"
              @search="onSearch"
            >
              <a-button slot="enterButton" type="primary"> 搜索 </a-button>
            </a-input-search>
          </a-col>
        </a-row>
        <!-- 筛选列表 -->
        <Collapse :opend="opend" @changOpend="changOpend">
          <a-row>
            <a-col :span="24">
              <span class="collapse-label">类型：</span>
              <a-radio-group v-model="query.type">
                <a-radio
                  v-for="(node, index) in typeList"
                  :value="node.value"
                  :key="index"
                >
                  {{ node.name }}
                </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-button type="primary" @click="getList(2)">查询</a-button>
              <a-button type="default" @click="handleRestQuery">重置</a-button>
            </a-col>
          </a-row>
        </Collapse>
      </div>
      <div class="table">
        <BaseTable
          ref="table"
          rowKey="id"
          :scroll="{ y: y }"
          :loading="loading"
          :columns="columns"
          :dataSource="list"
          :hideSelect="false"
          :selectedRowKeys="selectedRowKeys"
          @deleteRows="handleDelete"
          @selectChange="selectChange"
          @change="getList"
        ></BaseTable>
      </div>
    </div>
    <ShowEdit
      :visible="visible"
      :type="type"
      :data="row"
      @close="handleClose"
      @cb="getList"
    ></ShowEdit>
  </div>
</template>
<script>
import BaseTable from "@/components/BaseTable";
import httpApi from "@/api/account";
import loginApi from "@/api/login";
import ShowEdit from "./components/ShowEdit";
import Collapse from "@/components/Collapse";
import { typeList } from "@/utils";

export default {
  components: {
    BaseTable,
    ShowEdit,
    Collapse
  },
  data() {
    return {
      loading: false,
      opend: true,
      query: {
        type: undefined
      },
      typeList,
      list: [],
      time: -1,
      visible: false,
      type: "",
      row: {},
      queryName: undefined,
      selectedRowKeys: [],
      columns: [
        {
          title: "编号",
          dataIndex: "userNo"
        },
        {
          title: "用户名",
          dataIndex: "userName"
        },
        {
          title: "类型",
          dataIndex: "userType"
        },
        {
          title: "手机号",
          dataIndex: "mobile"
        },
        {
          title: "操作",
          width: 240,
          eclipse: true,
          customRender: (v, row) => {
            return (
              <div class="operate-td">
                <a onClick={() => this.handleShow(row)}>查看</a>
                <a-divider type="vertical" />
                <a onClick={() => this.handleEdit(row)}>编辑</a>
                <a-divider type="vertical" />
                <a onClick={() => this.handleRest(row)}>重置密码</a>
                <a-divider type="vertical" />
                <a onClick={() => this.handleDelete(row)}>删除</a>
              </div>
            );
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    y() {
      return this.opend ? 380 : 480;
    }
  },
  methods: {
    changOpend(opend) {
      this.opend = opend;
    },
    handleRestQuery() {
      // 重置
      this.query.type = undefined;
    },
    onSearch() {
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        this.getList(1);
      }, 600);
    },
    getList(current) {
      this.loading = true;
      if (current === 1) {
        this.$refs.table.pageInfo.current = 1;
      }
      httpApi
        .getList({
          queryName: this.queryName,
          pageNo: this.$refs.table.pageInfo.current,
          pageSize: this.$refs.table.pageInfo.pageSize
        })
        .then((res) => {
          if (res.retcode === 0) {
            this.list = res.data.records || [];
            if (this.$refs.table) {
              this.$refs.table.pageInfo.total = res.data.total;
            }
          } else {
            this.$message.error(res.msg);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err.msg);
          this.loading = false;
        });
    },
    handleAdd() {
      this.visible = true;
      this.row = {
        mobile: "",
        userName: ""
      };
      this.type = "add";
    },
    handleShow(row) {
      this.visible = true;
      this.row = row;
      this.type = "show";
    },
    handleEdit(row) {
      this.visible = true;
      this.row = row;
      this.type = "edit";
    },
    handleClose(show) {
      this.visible = show;
      this.row = {};
      this.type = "";
    },
    handleRest(row) {
      // 密码重置
      this.$confirm({
        title: "重置密码",
        content: () => (
          <div>
            <div class="pwd-msg">
              是否重置该用户密码？重置后密码将还原为初始密码?
            </div>
            <span class="pwd-tip">初始密码为手机号后6位</span>
          </div>
        ),
        onOk: () => {
          loginApi
            .resetPwd({
              id: row.id
            })
            .then((res) => {
              if (res.retcode === 0) {
                this.$message.success("密码重置成功！");
                this.getList();
              } else {
                this.$message.error("密码重置失败！");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg || "密码重置失败！");
            });
        },
        onCancel: () => {}
      });
    },
    handleDelete(row) {
      let title = "";
      let content = "";
      let ids = [];
      if (row) {
        ids = [row.id];
        title = "删除：";
        content = "是否删除该系统用户？";
      } else {
        ids = this.selectedRowKeys;
        title = "批量删除：";
        content = `是否删除已选中的 ${ids.length} 个系统用户？`;
      }

      this.$confirm({
        title,
        content,
        onOk: () => {
          httpApi
            .deleteRows(ids)
            .then((res) => {
              if (res.retcode === 0) {
                this.$message.success("删除成功！");
                this.getList();
              } else {
                this.$message.error(res.msg || "删除失败！");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg || "删除失败！");
            });
        },
        onCancel: () => {
          console.log("已取消删除操作");
        }
      });
    },
    selectChange(selectedKeys) {
      this.selectedRowKeys = selectedKeys;
    }
  }
};
</script>
<style scoped lang="less">
.pwd-msg {
  .font-Medium(14px,rgba(0, 0, 0, 0.65),22px,400);
}
.pwd-tip {
  .font-Medium(14px,rgba(0, 0, 0, 0.35),18px,400);
}
</style>
